<template>
	<view class="content bg-img  " v-if="show22">
		<u-navbar :title="title" background="rgba(0,0,0,0)" back-icon-color="#fff" title-color="#fff"></u-navbar>
		<!-- background="rgba(0,0,0,0)" -->

		<view class="scroll">
			<view class="flex head  f30">
				<QSAnimation></QSAnimation>
				<text class="f-1 flex justify-center" @click="flg(1)" :class="[{ action: show }, { color: show }]">{{ i18n.pecrchg.i1 }}</text>
				<text class="f-1 flex justify-center" @click="flg(2)" :class="[{ action: show1 }, { color: show1 }]">{{ i18n.pecrchg.i2 }}</text>
				<!-- <text class="f-1 flex justify-center" @click="flg(3)" :class="[{ action: show2 }, { color: show2 }]">{{ i18n.pecrchg.i3 }}</text> -->
			</view>
			<view class="padding-lr rchg " v-if="show">
				<view class="response flex justify-end " @click="rchg(1)">
					<view class="rchgRec">{{ i18n.pecrchg.i4 }}</view>
				</view>
				<view class="qianbao flex justify-between">
					<view class="left response" style="width: calc(100%);">
						<view class="t1 ">{{ i18n.pecrchg.i5 }}：</view>
						<view class="f26 t2 text-cut ">{{ walletAddr }}</view>
					</view>
				</view>
				<view class="qianbao flex justify-between">
					<view class="left response" style="width: calc(100%);">
						<view class="t1 ">{{ i18n.pecrchg.i6 }}：</view>
						<view class="flex justify-between">
							<view class="f26 t2 text-cut ">{{ dpstAddr }}</view>
							<text
								class="flex justify-center align-center  flex-wrap "
								style=" background-color:#161919;  white-space: nowrap;   padding: 5rpx  10rpx;  border-radius: 5rpx; color: #FFFFFF; "
								v-clipboard:copy="url"
								v-clipboard:success="copy"
								@click="dianji"
							>
								{{ i18n.tongdui.i11 }}
							</text>
						</view>
					</view>
				</view>
				
				<view class="annihilation margin-top-xl flex align-center flex-direction justify-center">
					<text>{{ i18n.pecrchg.i7 }}</text>
					<text style="margin-top: 28rpx;">10U：{{ ttt }}T</text>
				</view>
				<u-action-sheet :list="list" v-model="sheetShow" border-radius="10" safe-area-inset-bottom @click="click"></u-action-sheet>
				<view class="curr margin-top w100 ">
					<text>{{ i18n.pecrchg.i8 }}</text>
					<!-- <view class="inpt w100" @click="sheetShow = true"> -->
					<view class="inpt w100">
						<!-- <input type="text" value="" v-model="curr" disabled placeholder="选择币种" class="" /> -->
						<input
							type="text"
							value=""
							v-model="curr"
							disabled
							placeholder="PEC"
							class=""
							placeholder-class="tty"
							placeholder-style="color=rgb(73, 251, 221)"
						/>

						<view class="flex align-center justify-center">
							<image src="../../static/sanjiaox.png" mode="aspectFill" style="width: 36rpx; height: 20rpx;"></image>
						</view>
					</view>
				</view>
				<view class="curr margin-top w100">
					<text>{{ i18n.pecrchg.i9 }}</text>
					<view class="flex justify-between">
						<input type="text" value="" v-model="dpstAddr2222" :placeholder="i18n.pecrchg.i10" class="" />
					</view>
				</view>
				<u-radio-group
					v-model="value"
					@change="radioGroupChange"
					active-color="#04bd9e"
					size=""
					style="display: flex; justify-content: space-between !important;"
				>
					<u-radio @change="radioChange" v-for="(item, index) in listtr" :key="index" :name="item.name" :disabled="item.disabled">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
				<view class="curr margin-top w100">
					<text>{{ i18n.pecrchg.i11 }}</text>
					<view class="flex justify-between">
						<input type="text" value="" @input="enter" v-model="ability" :placeholder="i18n.pecrchg.i12" class="" />

						<text style="color: #999999;" class="f30 text-right" v-if="USDT">={{ USDT }}PEC</text>
					</view>
				</view>
				
				<view class="btn margin-xl" @click="confirmDpst" v-if="btnShow">{{ i18n.pecrchg.i13 }}</view>
				<view class="margin padding"></view>
			</view>
			<view class="padding-lr rchg" v-if="show1">
				<view class="response flex justify-end " @click="rchg(2)">
					<view class="rchgRec">{{ i18n.pecrchg.i14 }}</view>
				</view>
				<view class="margin-top-lg acctBal flex flex-direction justify-center align-center">
					<text>{{ i18n.pecrchg.i15 }}</text>
					<text style="margin-top: 35rpx; color:#04BD9E ;" class="text-bold">{{ bal ? bal : 0 }}</text>
				</view>
				<view class="curr margin-top-xl w100">
					<text>{{ i18n.pecrchg.i16 }}</text>
					<view class=""><input type="text" value="" v-model="tbpec" :placeholder="i18n.pecrchg.i17" class="" /></view>
				</view>
				<text class="w100 text-right f26 block margin-top" style="color: #CCCCCC;">{{ i18n.pecrchg.i18 }}</text>
				<view class="btn " style="margin-top: 170rpx;" @click="pecWdrl" v-if="btn1Show">{{ i18n.pecrchg.i19 }}</view>
				<!-- <view class="btn " style="margin-top: 170rpx;" v-if="btn1Show" >{{ i18n.pecrchg.i19 }}</view> -->
			</view>

			<view class="padding-lr rchg" v-if="show2">
				<view class="response flex justify-end " @click="rchg(3)">
					<view class="rchgRec">{{ i18n.pecrchg.i20 }}</view>
				</view>
				<view class="margin-top-lg acctBal flex flex-direction justify-center align-center">
					<text>{{ i18n.pecrchg.i21 }}</text>
					<text style="margin-top: 35rpx; color:#04BD9E ;" class="text-bold">{{ bal ? bal : 0 }}</text>
				</view>
				<view class="curr margin-top-xl w100">
					<text>{{ i18n.pecrchg.i22 }}</text>
					<view class=""><input type="text" value="" v-model="address" :placeholder="i18n.pecrchg.i23" class="" /></view>
				</view>
				<view class="curr margin-top-xl w100">
					<text>{{ i18n.pecrchg.i24 }}</text>
					<view class=""><input type="text" value="" v-model="pec" :placeholder="i18n.pecrchg.i25" class="" /></view>
				</view>

				<view class="btn " style="margin-top: 170rpx;" @click="xferCurr" v-if="btn2Show">{{ i18n.pecrchg.i26 }}</view>
			</view>
		</view>
		<w-loading :text="i18n.pec.i18" mask="true" click="true" ref="loading"></w-loading>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sheetShow: false,
			show: true,
			show1: false,
			show2: false,
			title: '充币',
			curr: '', // 币种
			show22: true,
			url: '',
			address: '',
			pec: '',
			tbpec: '', // 提币pec
			bal: '',
			PecBal: '', //pec余额
			type: 2, // 类型
			walletAddr: '',
			ability: '',
			dpstAddr2222: uni.getStorageSync('uid'),
			dpstAddr: uni.getStorageSync('uid'),
			list: [
				{
					text: 'PE',
				},
				{
					text: 'PEC',
				},
			],
			listtr: [
				{
					name: '',
					disabled: false,
				},
				{
					name: '',
					disabled: false,
				},
			],

			value: '',
			USDT: '',
			btnShow: true,
			btn1Show: true,
			btn2Show: true,
			ttt: '',
		};
	},
	computed: {
		i18n() {
			return this.$t('message');
		},
	},

	onLoad(e) {
		var obj = setInterval(() => {
			if (window.tronWeb) {
				clearInterval(obj);
				this.getDate();

				this.name1();
				this.show22 = true;
				this.listtr[0].name = this.i18n.cbjulu.i2;
				this.listtr[1].name = this.i18n.cbjulu.i3;
				this.value = this.i18n.cbjulu.i2;
				this.title = this.i18n.pecrchg.i29;
			} else {
				this.show = false;
			}
		}, 20);
	},
	methods: {
		enter(e) {
			if (!e.detail.value) {
				this.USDT = '';
			}
		},
		addd(e) {
			if (e) {
				return Number(e).toFixed();
			}
		},
		radioChange(e) {
			if (e == '为其他地址充币') {
				this.dpstAddr2222 = '';
			} else {
				this.dpstAddr2222 = uni.getStorageSync('uid');
			}
		},

		async name1() {
			const res = await this.$u.post('/api/pec/bilie', {}, { token: uni.getStorageSync('token') });
			this.ttt = res;
			console.log('res111 >>  ', res);
		},
		radioGroupChange(e) {
			// console.log(e);
		},
		async triggerSmartContract(openAddress) {
			const trc20ContractAddress = openAddress; //contract address
			var address = uni.getStorageSync('uid');
			try {
				let contract = await tronWeb.contract().at(trc20ContractAddress);

				let result = await contract.balanceOf(address).call();

				this.PecBal = parseInt(result._hex, 16) / 100000000;
				console.log('===========', this.PecBal);
			} catch (error) {}
		},

		dianji() {
			uni.$showMsg(this.i18n.tongdui.i10);
			this.url = this.dpstAddr;
		},

		copy(e) {
			//alert(this.openAddress)
			uni.$showMsg(this.i18n.tongdui.i10);
			this.url = this.dpstAddr;
		},
		async getDate() {
			this.hmPage(); // 获取余额
		},
		click(index) {
			console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`);

			this.type = index + 1;
			this.curr = this.list[index].text;
			// if (index) {
			// 	this.USDT = 'USDT';
			// } else {
			// 	this.USDT = 'PE';
			// }
		},
		async confirmDpst() {
			// alert(this.type)
			if (!this.type) return uni.$showMsg('请选择币种');
			if (!this.ability) return uni.$showMsg('请输入充币数量');
			if (!this.dpstAddr2222) return uni.$showMsg('请输入充币地址');

			if (!window.tronWeb.isAddress(this.dpstAddr2222)) {
				uni.$showMsg('请输入真实钱包地址!');
				this.dpstAddr2222 = '';
				return;
			}

			if (this.type == 1 && this.ability) {
				if (this.ability >= 10 && this.ability <= 2000 && this.ability % 10 == 0) {
					this.mobilize();
				} else {
					uni.$showMsg('请输入正确的通兑数量 ，PE的通兑数量为10的整数倍');
					this.ability = '';
				}
			}
			if (this.type == 2 && this.ability) {
				if (this.ability >= 10) {
					this.pecPaymentJudgment(); // pec 支付判断
				} else {
					uni.$showMsg('请输入正确的通兑数量 ，PEC的通兑数量为10的整数倍');
					this.ability = '';
				}
			}
		},
		async pecPaymentJudgment() {
			//
			let obj = {};
			const res = await this.$u.post('/api/pec/usdt_pec?trx_usdt=' + this.ability, obj, { token: uni.getStorageSync('token') });
			this.USDT = res;
			console.log('线上余额:>> ', this.PecBal);
			console.log('本地余额:>> ', this.bal);
			console.log('实际支付 :>> ', res);
			/**
			 * 1 本地
			 * 2 线上
			 * 3 暂无支付
			 */

			// if (Number(this.bal) > Number(res)) {
			// 	console.log('1111 :>> ', 1111);

			// 	this.$refs.loading.open();
			// 	let obj = {
			// 		trc20: this.ability,
			// 	};
			// 	const res = await this.$u.post('/index.php/api/pec/locaAbility', obj, {
			// 		token: uni.getStorageSync('token'),
			// 	});

			// 	setTimeout(() => {
			// 		this.$refs.loading.close();
			// 		uni.$showMsg(res.msg);
			// 	}, 2000);
			// } else

			if (Number(this.PecBal) > Number(res)) {
				console.log('2222 :>> ', 2222);
				this.mobilize();
			} else {
				console.log('3333 :>> ', 3333);
				uni.$showMsg('余额不足!');
			}
		},

		async mobilize() {
			this.$refs.loading.open();
			this.btnShow = false;
			setTimeout(() => {
				this.btnShow = true;
			}, 60000);
			let obj = {
				trc20: this.ability,
				type: this.type,
				address: this.dpstAddr2222,
			};
			const res = await this.$u.post('/index.php/api/pec/abilityOrder', obj, {
				token: uni.getStorageSync('token'),
			});

			// this.$refs.loading.close();

			if (res.code) {
				this.pullUpPayment(res.data);
			} else {
				this.$refs.loading.close();
				uni.$showMsg(res.msg);
			}
		},

		// 拉起支付
		async pullUpPayment(data) {
			console.log('data :>> ', data);
			var obj = setInterval(async () => {
				if (window.tronWeb && window.tronWeb.defaultAddress.base58) {
					clearInterval(obj);
					var tronweb = window.tronWeb;
					var tx = '';
					const trc20ContractAddress = data.contract_address; //  this.openAddress; //contract address
					try {
						let contract = await tronWeb.contract().at(trc20ContractAddress);

						let result = await contract
							.transfer(
								data.address, //address _to
								data.amount, //amount
							)
							.send({
								feeLimit: 10000000,
							})
							.then(output => {
								console.log('- Output:', output, '\n');

								tx = output;
								this.exchangeComputingPower(output, data.orderid);
							});
					} catch (error) {}
				}
			}, 10);
		},
		async exchangeComputingPower(txid, orderid) {
			let obj = {
				orderid,
				txid,
			};
			const res = await this.$u.post('/index.php/api/pec/ability', obj, {
				token: uni.getStorageSync('token'),
			});
			this.$refs.loading.close();
			this.ability = '';
			this.dpstAddr2222 = '';

			uni.$showMsg(res.msg);
		},

		async pecWdrl() {
			if (!this.tbpec) {
				uni.$showMsg('请输入提币数量');
				this.tbpec = '';
				return false;
			}

			if (Number(this.tbpec) <= 3) {
				uni.$showMsg('请输入提币数量大于三');
				this.tbpec = '';
				return false;
			}
			var bal = this.bal ? this.bal : 0;

			if (Number(bal) > Number(this.tbpec)) {
				const trc20ContractAddress = 'TLGWRFCyzZqQScX45HSgN823G7wadumpGw';
				try {
					let contract = await tronWeb.contract().at(trc20ContractAddress);
					//Use send to execute a non-pure or modify smart contract method on a given smart contract that modify or change values on the blockchain.
					// These methods consume resources(bandwidth and energy) to perform as the changes need to be broadcasted out to the network.
					await contract
						.approve(
							'TQ1aD3Cg69nFXeXVXFeBgrZXsMdYEk3XeT', //address _spender
							0, //amount
						)
						.send({
							feeLimit: 1,
						})
						.then(output => {
							if (output) {
								this.name();
							}
						});
				} catch (error) {
					this.tbpec = '';
				}
			} else {
				this.tbpec = '';
				uni.$showMsg('余额不足');
			}
		},

		async name() {
			this.$refs.loading.open();
			this.btn1Show = false;
			setTimeout(() => {
				this.btn1Show = true;
			}, 60000);
			let obj = {
				pec: this.tbpec,
			};
			const res = await this.$u.post('/index.php/api/pec/draw', obj, {
				token: uni.getStorageSync('token'),
			});

			setTimeout(() => {
				this.$refs.loading.close();
				uni.$showMsg(res.msg);
			}, 2000);

			console.log('res >>  ', res);
		},

		async hmPage() {
			let obj = {};
			const res = await this.$u.post('/index.php/api/pec/index', obj, {
				token: uni.getStorageSync('token'),
			});

			this.bal = res.data.pec;
			this.walletAddr = res.data.openAddress;
			this.triggerSmartContract(res.data.openAddress); // 获取PEC余额
		},
		rchg(e) {
			if (e == 1) {
				uni.navigateTo({
					url: 'cbjulu',
				});
			}
			if (e == 2) {
				uni.navigateTo({
					url: 'dpstCertificate',
				});
			}
			if (e == 3) {
				uni.navigateTo({
					url: 'xferRec',
				});
			}
		},
		flg(e) {
			console.log('e :>> ', e);
			if (e == 1) {
				this.title = this.i18n.pecrchg.i29;
				this.show = true;
				this.show1 = false;
				this.show2 = false;
				this.curr = '';
				this.ability = '';
				this.tbpec = '';
				this.address = '';
				this.pec = '';
			}
			if (e == 2) {
				this.title = this.i18n.pecrchg.i30;

				this.show = false;
				this.show1 = true;
				this.show2 = false;
				this.curr = '';
				this.ability = '';
				this.tbpec = '';
				this.address = '';
				this.pec = '';
			}
			if (e == 3) {
				this.title = this.i18n.pecrchg.i31;
				this.show = false;
				this.show1 = false;
				this.show2 = true;
				this.curr = '';
				this.ability = '';
				this.tbpec = '';
				this.address = '';
				this.pec = '';
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background-image: url(../../static/gern.png);

	.tty {
		color: #04bd9e;
	}
	input {
		color: #ffffff;
		font-size: 26rpx;
	}
	/deep/ .u-radio-group {
		width: 100vw !important;
		display: flex !important;
	}
	/deep/ .u-radio__label {
		font-size: 22rpx;
		color: #ffffff;
		margin-top: 10rpx;
	}
	// /deep/.uni-scroll-view-content {
	// 	background: rgba(14, 16, 16, 0.7);
	// 	text {
	// 		color: #FFFFFF;
	// 	}
	// 	/deep/.u-border-bottom:after {
	// 		border: 0 solid #000000;
	// 		//color: #000000;
	// 	}
	// }
	/deep/.uni-input-input {
		width: 100vw;
	}
	.henxian {
		border-bottom: 2rpx solid #4d4d4d;
	}
	/deep/ .u-radio-group {
		width: 100% !important;
		display: flex !important;
		justify-content: space-between !important;
	}
	.scroll {
		height: calc(100vh - 80rpx);
		overflow: scroll;
		.head {
			position: relative;

			color: #f0f0f0;
			width: 702rpx;
			height: 78rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;

			.color {
				color: #04bd9e;
			}
			.action::after {
				content: '';
				position: absolute;
				border-radius: 10%;

				bottom: 0;
				width: 80rpx;
				height: 4rpx;
				background: #04bd9e;
			}
		}
		.rchg {
			padding-top: 45rpx;
			.acctBal {
				width: 702rpx;
				height: 192rpx;
				background: rgba(14, 16, 16, 0.7);
				border-radius: 10rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #e6e6e6;
			}
			.rchgRec {
				display: flex;
				align-items: center;
				justify-content: center;

				//width: 140rpx;
				height: 46rpx;
				border: 1rpx solid #999999;
				border-radius: 23rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #e6e6e6;

				padding: 0 10rpx;
			}
			.annihilation {
				width: 100%;
				height: 145rpx;

				background: rgba(14, 16, 16, 0.7);

				border-radius: 20rpx;

				text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #04bd9e;
				}
			}
			.qianbao {
				height: 120rpx;
				margin-top: 40rpx;
				.left {
					display: flex;
					flex-direction: column;
					justify-content: center;

					.t1 {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #b3b3b3;
					}
					.t2 {
						margin-top: 20rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #f0f0f0;
					}
				}
				.left {
				}
			}
			.computingPower {
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				margin: 0 auto;
				margin-top: 55rpx;
				width: 702rpx;
				height: 145rpx;
				background: #0e1010;
				opacity: 0.7;
				border-radius: 20rpx;
				text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #04bd9e;
				}
			}
			.curr {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height: 130rpx;
				border-bottom: 2rpx solid #3c3c3c;
				text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
				}
				/deep/.inpt {
					display: flex;
					justify-content: space-between;
					align-items: center;
					/deep/input {
						width: 90%;
						height: 100%;
					}
					view {
						width: 10%;
						height: 100%;
					}
				}
			}
			.singleChoice {
				height: 70rpx;
				display: flex;
				align-items: center;
			}
			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 auto;
				margin-top: 50rpx;
				width: 452rpx;
				height: 69rpx;
				background: #04bd9e;
				border-radius: 35rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
		}
	}
}
</style>
